<!-- 协议文档 -->
<template>
    <div>
        <!-- 选项卡 -->
        <tabs
            class="bgwhite"
            :form-data="tabs"
            default=""
            style="padding:0 0 5px 52px"
            @changeTab="changeTab"
        />
        <!-- 过滤条件 -->
        <div class="filter flex flex-between flex-y">
            <div class="flex">
                <search
                    style="width:200px;"
                    class="right20"
                    tip="请输入协议名称"
                    @searchOK="searchOK"
                />
                <div class="flex flex-y right20">
                    <div class="right10">应用平台</div>
                    <el-select
                        v-model="value_app"
                        clearable
                        style="width:140px"
                        placeholder="请选择"
                        @change="list"
                    >
                        <el-option
                            v-for="item in list_app"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="flex flex-y right20">
                    <div class="right10">发布日期</div>
                    <el-date-picker
                        v-model="date"
                        style="width:220px"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        @change="list"
                    />
                </div>
                <el-button type="primary" plain @click="reset()">重置</el-button>
            </div>
            <el-button type="primary" @click="title='新增协议',ifShow = !ifShow">新增</el-button>
        </div>
        <!-- 表格 -->
        <div class="main">
            <el-table
                v-loading="loading"
                :data="formData"
                style="width: 100%"
            >
                <el-table-column
                    prop="id"
                    label="协议ID"
                    width="100"
                />
                <el-table-column
                    prop="ruleType"
                    label="应用平台"
                >
                    <template slot-scope="scope">
                        {{ filter_app(scope.row.ruleType) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="protocolName"
                    label="协议名称"
                />
                <el-table-column
                    prop="modifyby"
                    label="管理员"
                />
                <el-table-column
                    prop="modifyDate"
                    label="操作时间"
                >
                    <template slot-scope="scope">
                        {{ filter_date(scope.row.modifyDate) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="上线状态"
                >
                    <template slot-scope="scope">
                        <span :class="{'green':scope.row.status == 1,'gray':scope.row.status == 2}">{{ filter_status(scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native="view('view',scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="view('modif',scope.row)">修改</el-button>
                        <el-button
                            v-if="scope.row.status == 1"
                            type="text"
                            size="small"
                            @click.native="off(scope.row,'off')"
                        >
                            下线
                        </el-button>
                        <el-button
                            v-else
                            type="text"
                            size="small"
                            @click.native="off(scope.row,'open')"
                        >
                            上线
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <page :total="pageTotal" @change="changePage" />
        </div>
        <!-- 新增 -->
        <newData
            :if-show="ifShow"
            :title="title"
            :form-data="currentData"
            @newOK="list"
        />
    </div>
</template>

<script>
import tabs from '@/components/public/tabs/tabs'
import search from '@/components/public/search/search'
import newData from '@/components/record/agreement'
import { formatDate } from '@/utils/formatDate.js'
import page from '@/components/public/Pagination'
export default {
    components: {
        tabs,
        search,
        newData,
        page
    },
    data () {
        return {
            // 选项卡
            active: null,
            tabs: [
                {
                    value: null,
                    label: '全部'
                },
                {
                    value: '3', // 实际是0
                    label: '未上线'
                },
                {
                    value: '1',
                    label: '已上线'
                },
                {
                    value: '2',
                    label: '已下线'
                }
            ],
            // 过滤条件
            search: '',
            value_app: '',
            list_app: [
                {
                    value: '2',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '砂锅号'
                },
                {
                    value: '1',
                    label: '砂锅问答'
                }
            ],
            date: [],

            // 表格
            loading: false,
            formData: [],

            // 分页
            pageNum: 1,
            pageSize: 20,
            pageTotal: '',

            // 弹窗
            ifShow: false,
            title: '新增协议',
            currentData: ''
        }
    },
    mounted () {
        this.list()
    },
    methods: {
        // 列表
        list: function () {
            // 解决element tab组件null会自动转换为0
            let active = ''
            if (this.active == 3) {
                active = '0'
            } else if (this.active == 0) {
                active = ''
            } else {
                active = this.active
            }
            // 解决element tab组件null会自动转换为0
            this.loading = true
            HTTP('rule_list', {
                searchStr: this.search,
                status: active, // this.active,0:未上线,1已上线,2已下线，null全部
                ruleType: this.value_app, // this.value_app, //:0:砂锅号，:1问答，''全部
                beginDate: this.date[0],
                endDate: this.date[1],
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
                .then(res => {
                    if (res.code == 200) {
                        this.formData = res.rows
                        this.pageTotal = res.total
                        this.loading = false
                    } else {
                        this.common.msg(res.msg, 'error')
                    }
                })
        },
        // 改变分页
        changePage: function (obj) {
            this.pageSize = obj.pageSize
            this.pageNum = obj.pageNum
            this.list()
        },
        // 搜索
        searchOK: function (val) {
            this.pageNum = 1
            this.search = val
            this.list()
        },
        // 重置
        reset: function () {
            this.pageNum = 1
            this.search = ''
            this.value_app = ''
            this.date = []
            this.list()
        },
        // 查看
        view: function (type, data) {
            this.title = type == 'view' ? '查看协议' : '修改协议'
            this.currentData = data
            this.ifShow = !this.ifShow
        },
        // 下线对话框 off or open
        off: function (e, type) {
            const msg = type == 'off' ? '下线' : '上线'
            this.$confirm(`确定要${msg}该标签吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    HTTP('rule_modif', {
                        uid: e.uid,
                        status: type == 'off' ? 2 : 1 // 1已上线，2已下线
                    })
                        .then(res => {
                            if (res.code == 200) {
                                this.common.msg('操作成功')
                                this.list()
                            } else {
                                this.common.msg(res.msg, 'error')
                            }
                        })
                })
        },
        // 切换选项卡
        changeTab: function (e) {
            this.active = e
            this.list()
        },
        // 应用平台转中文
        filter_app: function (val) {
            if (val == 1) {
                return '砂锅问答'
            } else if (val == '0') {
                return '砂锅号'
            } else {
                return '全部'
            }
        },
        // 时间戳转时间
        filter_date: function (time) {
            const date = new Date(time * 1000)
            return formatDate(date, 'yyyy-MM-dd mm:ss')
        },
        // 上线状态转中文
        filter_status: function (val) {
            if (val == 1) {
                return '已上线'
            } else if (val == 2) {
                return '已下线'
            } else {
                return '未上线'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
	.filter{
		padding: 5px 30px 25px 30px;
		background-color: #fff;
	}
	.main{
		background-color: #fff;
		margin-top: 10px;
		padding: 30px 50px;
	}
	// 颜色
	.green{
		color: $green;
	}
	.gray{
		color: #ccc;
	}
</style>
